<template>
  <div>
      <el-table v-if="isStatus==false"
        border
        width="100%"
        :data="coupons">
        <el-table-column label="优惠券名称" style="width: 210px">
          <template slot-scope="row">
            <el-select style="display: inline-block"  v-model="row.row.giftName" value-key="id" placeholder="请选择优惠券" @change="couponClick($event,row.$index)">
              <el-option v-for="(item,index) in couponList" :label="item.name" :key="item.id" :value="item" ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="优惠券数量" style="width: 100px">
          <template slot-scope="{row}">
            <el-input v-model="row.quantity" ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="月限量" style="width: 100px">
          <template slot-scope="{row}">
            <el-input v-model="row.availableQuantity" ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="isStatus==0" style="width: 80px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <a style="margin-left: 10px" @click="deleteAd(scope.$index)">
                <i style="color: #F56C6C" class="el-icon-delete"></i>
              </a>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

    <el-table
      border
      width="100%"
      v-if="isStatus==true"
      :data="coupons">
      <el-table-column label="优惠券名称" style="width: 210px">
        <template slot-scope="{row}">
          <el-select style="display: inline-block"  v-model="row.giftName" placeholder="请选择优惠券" disabled v-if="isStatus==true">
            <el-option v-for="(item,index) in couponList" :label="item.name" :value="JSON.stringify(item.id)" ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="优惠券数量" style="width: 100px"
      >
      </el-table-column>
      <el-table-column
        prop="availableQuantity"
        label="月限量" style="width: 100px"
      >
      </el-table-column>
      <el-table-column label="操作" v-if="isStatus==0" style="width: 80px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <a style="margin-left: 10px" @click="deleteAd(scope.$index)">
              <i style="color: #F56C6C" class="el-icon-delete"></i>
            </a>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
  import { list } from '../../../api/coupon'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  export default {
    directives: {elDragDialog},
    name: 'editCoupon',
    data(){
      return{
        coupons:[],
        couponList:[]
      }
    },
    created() {
      this.getCoupon(),
       this.getEditCoupon()
      console.log(this.editCoupon)
    },
    props:["couponType","editCoupon",'editGiftType','isStatus'],
    methods:{
      getEditCoupon(){
        if(this.editCoupon.length>0){
          this.coupons=this.editCoupon
        }else {
          this.coupons=[];
        }
      },
      deleteAd(index){
        this.coupons.splice(index, 1)
      },
      add(){
        var PromotionCoupons={
          giftId:this.editGiftType,
          giftName:'',
          promotionId:'',
          quantity:0,
          availableQuantity:0,
        }
        this.coupons.push(PromotionCoupons)
        console.log(this.coupons)
      },
      getCoupon(){
        list().then(response =>{
          response.data.data.forEach(item=>{
            let coupon={
              name:item.name,
              id:item.id
            }
            this.couponList.push(coupon)
          })
        })
      },
      couponClick(data,index){
        console.log(data)
        console.log(index)
        this.coupons[index].giftId = data.id
        this.coupons[index].giftName = data.name
      }
    }
  }
</script>

<style scoped>


</style>
